<template>
	<div class="login">
		<div class="logo">
			<img width="100%" src="../assets/image/logo.jpg" alt="" />
		</div>
		<!-- 手机号 -->
		<InputGroup
			type="number"
			v-model="phone"
			placeholder="手机号"
			:btnTitle="btnTitle"
			:disabled="disabled"
			:error="errors.phone"
			@btnClick="getVerifyCode"
		></InputGroup>
		<!-- 验证码 -->
		<InputGroup
			type="number"
			v-model="verifyCode"
			placeholder="验证码"
			:disabled="disabled"
			:error="errors.code"
		></InputGroup>
		<!-- 用户服务协议 -->
		<div class="login_des">
			<p>新用户登陆即自动注册，表示已同意</p>
			<span>《用户服务协议》</span>
		</div>
		<!-- 登录按钮 -->
		<div class="login_btn">
			<button @click="login">登录</button>
		</div>
	</div>
</template>

<script>
import InputGroup from '../components/inputGroup'
export default {
	data() {
		return {
			phone: '',
			verifyCode: '',
			errors: {},
			btnTitle: '获取验证码',
			disabled: false,
		}
	},
	components: {
		InputGroup,
	},
	methods: {
		getVerifyCode() {
			if (this.validatePhone()) {
				this.validateBtn()
				// 发送网络请求
			}
		},
		login() {
			localStorage.setItem('ele_login', true)
			this.$router.push('/')
		},
		//倒计时
		validateBtn() {
			let time = 60
			let timer = setInterval(() => {
				if (time == 0) {
					clearInterval(timer)
					this.btnTitle = '获取验证码'
					this.disabled = false
				} else {
					console.log(11)
					this.btnTitle = time + '秒后重试'
					this.disabled = true
					time--
				}
			}, 1000)
		},
		validatePhone() {
			//验证手机号码
			if (!this.phone) {
				this.errors = {
					phone: '手机号码不能为空',
				}
				return false
			} else if (!/^1[345678]\d{9}$/.test(this.phone)) {
				this.errors = {
					phone: '请填写正确的手机号码',
				}
				return false
			} else {
				this.errors = {}
				return true
			}
		},
	},
}
</script>

<style lang="less" scoped>
.login {
	width: 100%;
	height: 100%;
	padding: 30px;
	box-sizing: border-box;
	background: #fff;
	// text-align: center;
}
.logo {
	text-align: center;
	img {
		width: 150px;
	}
}
.text_group,
.login_des,
.login_btn {
	margin-top: 20px;
}
.login_des {
	color: #aaa;
	line-height: 22px;
}
.login_des span {
	color: #4d90fe;
}
.login_btn button {
	width: 100%;
	height: 40px;
	background-color: #48ca38;
	border-radius: 4px;
	color: white;
	font-size: 14px;
	border: none;
	outline: none;
}
.login_btn button[disabled] {
	background-color: #8bda81;
}
</style>
